<template>
        <div>
                <el-button>发布签到</el-button>
                <el-table :data="filterTableData" style="width: 100%">
                        <el-table-column label="Date" prop="attendState" />
                        <el-table-column label="Name" prop="attendType" />
                        <el-table-column label="attendid" prop="attendId"/>
                        <el-table-column align="right">
                                <template #header>
                                        <el-input v-model="search" @input="filterTableDat" size="small" placeholder="Type to search" />
                                </template>
                                <template #default="scope">
                                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                                        >Edit</el-button
                                        >
                                        <el-button
                                                size="small"
                                                type="danger"
                                                @click="handleDelete(scope.$index, scope.row)"
                                        >Delete</el-button
                                        >
                                </template>
                        </el-table-column>
                </el-table>
        </div>
</template>

<script>
    import qs from 'qs'
    export default {

        name: "AttendanceManagement",
        data(){

            return{
                tableData:[],
                search:'',
                filterTableData:[]
            }
        },
        methods:{
            filterTableDat(){
                console.log(this.tableData)
                this.filterTableData=this.tableData.filter(
                    (data) => {
                        return data.attendState.includes(this.search.toLowerCase())||data.attendType.includes(this.search.toLowerCase())

                    }
                )
                // for(var item of this.tableData){
                //     console.log(item.name)
                //     console.log(item.name.toLowerCase().includes('1'))
                // }

                //console.log(this.filterTableData[0].pid)
            },
            handleEdit(index,row){
                console.log(index, row)
            },
            handleDelete(index,row){
                console.log(index, row)
            }

        },
        created(){
            // this.tableData = [
            //     {
            //         date: '2016-05-03',
            //         name: 'Tom',
            //         address: 'No. 189, Grove St, Los Angeles',
            //     },
            //     {
            //         date: '2016-05-02',
            //         name: 'John',
            //         address: 'No. 189, Grove St, Los Angeles',
            //     },
            //     {
            //         date: '2016-05-04',
            //         name: 'Morgan',
            //         address: 'No. 189, Grove St, Los Angeles',
            //     },
            //     {
            //         date: '2016-05-01',
            //         name: 'Jessy',
            //         address: 'No. 189, Grove St, Los Angeles',
            //     },
            // ]
            let that=this
            this.$axios.get("http://localhost:8080/attend/list").then(function (res) {

                that.tableData=res.data
                that.filterTableData=that.tableData
            })



        }

    }
</script>


<style scoped>

</style>
